<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header"></head>
<body>
	<form class="layui-form" action="" lay-filter="chao_richtext-update-form" style="margin-top: 20px;">
		<input th:value="${session.formToken}" name="formToken" type="hidden" />
		<input name="id" th:value="${chaoRichtext.id}" type="hidden">
		<!--  -->
		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">标题：</label>
			<div class="layui-input-block">
				<input class="layui-input" lay-verify="required" autocomplete="off" id="title"
					th:value="${chaoRichtext.title}" name="title" placeholder="请输入标题">
			</div>
		</div>
		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">展示图：</label>
			<div class="layui-inline">
				<input type="hidden" name="img" lay-verify="required" th:value="${chaoRichtext.img}">
				<img class="layui-upload-img" id="showImg" th:src="@{${realm}+${chaoRichtext.img}}"
					style="width: 135px; height: 135px;">
			</div>
			<div class="layui-inline">
				<div class="layui-upload-drag" id="uploadImg">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
				</div>
			</div>
		</div>
		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">内容：</label>
			<div class="layui-input-block">
				<div id="editor"></div>
				<input type="hidden" id="content" name="content" th:value="${chaoRichtext.content}">
			</div>
		</div>
		<!--  -->
		<!--  -->
		<div class="layui-form-item">
			<label class="layui-form-label">创建时间：</label>
			<div class="layui-input-block">
				<input class="layui-input" lay-verify="required" autocomplete="off" id="createTime"
					th:value="${#dates.format(chaoRichtext.createTime, 'yyyy-MM-dd HH:mm:ss')}" name="createTime"
					placeholder="请输入创建时间">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="chao_richtext-update">立即提交</button>
			</div>
		</div>
	</form>
	<div th:include="include::footer"></div>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.config({
			base : '/core/js/'
		}).use([ 'layer', 'jquery', 'form', 'laydate', 'upload', 'wangEditor' ], function() {
			var $ = layui.jquery;
			var laydate = layui.laydate;
			var layer = layui.layer;
			var form = layui.form;
			var upload = layui.upload;
			var wangEditor = layui.wangEditor;
			//https://www.kancloud.cn/wangfupeng/wangeditor3/335780 在线文档
			//富文本编辑器
			var editor = new wangEditor('#editor');
			editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024; //图片大小 默认1M
			editor.customConfig.uploadImgMaxLength = 5; //图片数量
			editor.customConfig.uploadImgShowBase64 = true;
			var content = $('#content')
			editor.customConfig.onchange = function(html) {
				// 监控变化，同步更新到 textarea
				content.val(html)
			}
			editor.create();
			editor.txt.html(content.val());//内容初始化
			// 初始化 textarea 的值
			content.val(editor.txt.html())

			//拖拽上传
			upload.render({
				elem : '#uploadImg',
				url : '/file/uploadImg/',
				done : function(res) {
					//修改数据属性
					console.log(res);
					var data = res.data;
					$("[name=img]").val(data.src);
					$("#showImg").attr("src", data.realm + data.src);

				}
			});
			//日期时间选择器
			laydate.render({
				elem : '#createTime',
				type : 'datetime'
			});

			//监听提交
			form.on('submit(chao_richtext-update)', function(data) {
				//提交数据data.field
				ajaxPostLoad("/chao/richtext/update", data.field);
				return false;
			});
		});
	</script>
</body>
</html>